<template>
  <div>
    <!-- 查询条件 -->
      <div class="assign-header">
        <el-form :inline="true" :model="searchForm" ref="searchForm">
          <el-form-item>
            <el-button type="primary" icon="el-icon-position" @click="assignAdd">批量添加</el-button>
          </el-form-item>
          <el-form-item label="老人姓名" style="margin-left: 20px;" prop="name">
            <el-input v-model="searchForm.name" clearable placeholder="老人姓名" @change="clear" @clear="clear"></el-input>
          </el-form-item>
          <el-form-item label="负责站点" prop="team_id">
            <el-select v-model="searchForm.team_id" clearable @change="clear" @clear="clear" placeholder="请选择负责站点">
              <el-option
                v-for="item in teamList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch" :disabled="loading">查询</el-button>
            <el-button @click="onReset" :disabled="loading">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    <!-- Table组件 -->
    <main-table :columns="columns" :data="tableList" :pagination="pagination" @getData="fetchTableList" @handleSelectChange="handleSelectChange" @selectAll="selectAll" :loading="loading" wrapperHeight="600px">
      <!-- wrapperHeight：父元素高度根据实际布局情况配置，大多情况可能是 外层祖父元素高度 减去 其他兄弟元素的高度，如果外层祖父元素高度或者兄弟元素的高度不固定，可能需要借助 js来计算 -->
    </main-table>
  </div>
</template>
<script>
import * as APISolder from '@/api/solder'
import * as APIOrderactivity from '@/api/orderactivity'
import { unixToDate, sex, age, sourceType } from "@/utils"
import { mapState } from 'vuex'
import { Message } from 'element-ui'
import mainTable from "@/components/main-table/index";
export default {
  name: 'orderactivity-older-name',
  props: {
    activityolderlist: {
      type: Array,
      default: () => []
    },
    activityid: {
      type: String,
      default: ''
    }
  },
  components: {
    mainTable
  },
  data () {
    return {
      // 查询条件
      teamList:[],
      searchForm: {
        page: 1
      },
      columns: [
        {
          selection: true,
          fixed: true
        },
        {
          index: true,
          fixed: true
        },
        {
          prop: 'name',
          label: '名称',
          width: 100,
          fixed: true
        },
        {
          prop: 'sex',
          label: '性别',
          width: 60,
          formatter (row, column, cellValue) {
            return sex(cellValue)
          }
        },
        {
          prop: 'birthday',
          label: '年龄',
          width: 60,
          formatter (row, column, cellValue) {
            return age(cellValue)
          }
        },
        {
          prop: 'source_type',
          label: '老人来源',
          width: 100,
          formatter (row, column, cellValue) {
            return sourceType(cellValue)
          }
        },
        {
          prop: 'address',
          label: '老人住址'
        },
        {
          prop: 'team_name',
          label: '负责站点',
          width: 200
        },
       /* {
          slot: 'action'
        } */
      ],
      tableList: [],
      pagination: {
        current: 1,
        size: 15,
        total: 0
      },
      loading: false,
      selection: []
    }
  },
  mounted () {
    this.fetchTableList();
    this.teamIndex();
  },
  methods: {
    // 选中老人
    handleSelectChange (val) {
      this.selection = val
    },
    // 全选
    selectAll (val) {
      this.selection = val
    },
    // 关闭弹窗
    close () {
      this.$emit('cancle')
    },
    // 手动清空/搜索
    clear () {
      this.fetchTableList({ page: 1 })
    },
    // 站点列表
    teamIndex () {
      APISolder.teamIndex({ page_size: 100 }).then(res => {
        this.teamList = res.list
      })
    },
    // 批量添加老人
    assignAdd () {
      const arr = []
      if(this.selection.length == 0){
        Message({message: '请选择老人',type: 'error',duration: 5 * 1000})
        return false;
      }
      this.selection.forEach(item => {
        arr.push(item.id)
      })
      APIOrderactivity.orderactivityEditolder({
        activity_id: this.activityid,
        older_id: arr.join(','),
        status: '1'  // 1 添加   2 删除
        }).then(res => {
        this.fetchTableList();
        this.$emit('load');
        this.close();
      })
    },
    // 获取数据
    fetchTableList (pageObj) {
      this.loading = true
      this.searchForm = {
        ...this.searchForm,
        ...pageObj
      }
      APISolder.solderIndex(this.searchForm).then((resp) => {
        this.loading = false;
        if (resp.code === 200) {
          const { list = [], total = 0 } = resp.data;
          this.tableList = list || [];
          this.pagination.total = total;
        }
      }).finally(() => {
        this.loading = false
      })
    },
    // 点击”查询“按钮 => 此时缓存查询参数
    onSearch () {
      this.pagination = {
        current: 1,
        size: 15,
        total: 0
      }
      this.fetchTableList()
    },
    // 重置
    onReset () {
      this.$refs.searchForm.resetFields()
      this.fetchTableList()
    },
  }
}
</script>
<style lang="scss" scoped>
  .assign-header {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
  }
</style>
